# Img Component

<EpicVideo url="https://www.epicreact.dev/workshops/react-suspense/img-component" />

👨‍💼 Our users have noticed this annoying behavior. Here's how you reproduce it:

{/* prettier-ignore */}
- Set the playground to this exercise
- <LinkToApp to="/">Open the playground</LinkToApp> (in a separate tab)
- Open the dev tools
- Notice that we've added a version query parameter to the images to simulate
  initial loading. This is why you see a different versions in the URL for
  each image.
- [Throttle your network](https://developer.chrome.com/docs/devtools/network/reference#throttling) speed in the dev tools to "Slow 3G"
- Click a separate ship

<callout-warning>
	🚨 While you're here, make sure you have `Disable cache` *unchecked* in the
	Network tab of dev tools. Otherwise, the browser will ignore your preloaded
	image and try to re-fetch it, bypassing your solution.
</callout-warning>

You should notice the network loads the data for the ship. While that happens,
our pending state is shown (great job on that again). Once the data is loaded,
the component re-renders with the new data (even the `img` `src` gets updated
properly). However, the `img` is still loading. This is because the browser
waits for the new image `src` to be loaded before switching to the new image.

Our users are confused by this, and that's what we need you to solve using
Suspense, the `use` hook, and a `preloadImage` utility.

The emoji will guide you through this one.
Best to start in <InlineFile file="utils.tsx" />. Lots of this will feel similar
to what we were doing with the `getShip` regarding the caching stuff!

<callout-warning>
	🚨 Note, this is extremely difficult to test, so the test may be unreliable.
	However, if you do throttle the network, then the test will be much more
	reliable.
</callout-warning>
